<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page isELIgnored="false" %>
<%@ include file="/WEB-INF/views/common/includes.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title><fmt:message key="event.website.title"/></title>
		<link href="<c:url value='/static/css/estilo_efqm.css'/>" rel="stylesheet" type="text/css" />
		<link href="<c:url value='/static/css/acordion.css'/>" rel="stylesheet" type="text/css" />
		
		<link href="<c:url value='/static/css/osx.css'/>" rel="stylesheet" type="text/css" />
		<link type='text/css' href='/static/css/basic.css' rel='stylesheet' media='screen' />

		<!-- IE 6 "fixes" -->
		<!--[if lt IE 7]>
			<link type='text/css' href='/static/css/basic_ie.css' rel='stylesheet' media='screen' />
		<![endif]-->
		
		<script type="text/javascript" src="<c:url value='/static/js/google_analytics_inc.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jquery-1.4.min.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jquery.tools.min.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jquery.simplemodal.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/osx.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/basic.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/json.min.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/ddaccordion.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/static/js/jcarousellite.js'/>"></script>
		
		<script type="text/javascript">

		  
		      $(document).ready(function() {
		    	  $("#advice img[title]").tooltip();
		      });


			function rememberPassword() {
				var email = jQuery.trim($("#username").val());
				if(email=='') {
					alert("<fmt:message key='error.email.fail'/>");
					return;
				}
				$.ajax({
   					type: "GET",
   					url: "<c:url value='/participant/remember'/>",
   					data: "email=" + email,
   					success: function(msg){
     					alert(  msg );
   					}
 				});
			}

			
 		</script>
 		
 		<script type="text/javascript">
 			

  			$(function() {
  			    $(".scroll_videos").jCarouselLite({
  			    	mouseWheel: true,
  			    	visible: ${fn:length(companies)},
  			        btnNext: ".next",
  			        btnPrev: ".prev"
  			    });
  			});

	  			
		</script>
		
	</head>
	
	<body id="efqm" class="home"> 
	  
	  <!-- modal content -->
		<div id="osx-modal-content">
			<div id="osx-modal-title"><fmt:message key='goodpractice.instructions.title'/></div>
			<div class="close"><a href="#" class="simplemodal-close">x</a></div>
			<div id="osx-modal-data">
				<p>1.<fmt:message key='goodpractice.instructions.instruction.1'/><br/>
				 	1.1 <fmt:message key='goodpractice.instructions.instruction.1.1'/><br/>
				 	1.2 <fmt:message key='goodpractice.instructions.instruction.1.2'/>
				 </p>
				<p>2.<fmt:message key='goodpractice.instructions.instruction.2'/><br/>
					2.1 <fmt:message key='goodpractice.instructions.instruction.2.1'/><br/>
					2.2 <fmt:message key='goodpractice.instructions.instruction.2.2'/><br/>
					2.3 <fmt:message key='goodpractice.instructions.instruction.2.3'/><br/>
				</p>
				<p>
					<button class="simplemodal-close"><fmt:message key='action.modal.window.close'/></button> 
					<span><fmt:message key='action.modal.window.escape'/></span>
				</p>
			</div>
		</div>
		
		<!-- modal content -->
		<div id="basic-modal-content">
			<div id="osx-modal-title"><fmt:message key="action.filter.select.msg"/></div>		
			<c:forEach items="${cloud.tags}" var="tag">
				<a href="<c:url value='/company/facet/activity-sector/${tag.link}'/>"><fmt:message key="${tag.name}"/></a>
			</c:forEach>	
		</div>
		
		<!-- modal content -->
		<div id="basic2-modal-content">
			<span><fmt:message key="action.filter.innovation.type.select.msg"/></span>
			<ul>
			<c:forEach items="${bestPracticeTypes}" var="bestPracticeType">
				<li><a href="<c:url value='/company/facet/innovation-type/${bestPracticeType.code}'/>">
					<fmt:message key="${bestPracticeType.titleCode}"/>
				</a></li>
			</c:forEach>
			</ul>
		</div>
		
	  <div id="global" class="fondo_practices">
		
		<%@ include file="/WEB-INF/views/common/header.jsp" %>
			
		<div id="efqm_content"> 
			<h3 class="upload_practices">
				<fmt:message key="event.website.target"/>
			</h3>	
			<div id="conten_central">
				<div class="columna_left">
					<div class="borde_right">
					
						<h4><fmt:message key="event.title"/></h4>
					
						
						<c:choose>
							<c:when test="${not empty user}">
								<p class="welcome">
									<fmt:message key="user.welcome"/>, <sec:authentication property="principal.username"/>
								</p>
								<p></p>
								
								
								<sec:authorize access="hasRole('ROLE_COMPANY_SUPERVISOR')">
									<p>
										<a href="<c:url value="/dashboard"/>"><fmt:message key="action.plataform.administer"/></a>
									</p>
								</sec:authorize>
								
								<sec:authorize access="hasRole('ROLE_COMPANY')">
								<form action="" method="post">
									<a href="<c:url value='/company/'/>" title="<fmt:message key="action.company.manage.data"/>" class="register">
										<span><fmt:message key="action.company.manage.data"/></span>
									</a>
								</form>
								</sec:authorize>
							</c:when>
							<c:otherwise>
								
    					<c:if test="${not empty param.login_error}">
      						<font color="red">
        						<fmt:message key="user.badlogin.advice"/><br/><br/>
        						<fmt:message key="user.badlogin.reason.tag"/>: <c:out value="${SPRING_SECURITY_LAST_EXCEPTION.message}"/>
      						</font>
    					</c:if>
						
						 <form name="login_form" action="<c:url value='j_spring_security_check'/>" method="POST">
							<label for="j_username">
								<fmt:message key="user.login.user"/>:
							</label>
        					<input type='text' id="username" name='j_username' value='<c:if test="${not empty param.login_error}">
        						<c:out value="${SPRING_SECURITY_LAST_USERNAME}"/></c:if>'/>
        					<label for="j_password">
								<fmt:message key="user.login.password"/>:
							</label>
        					<input type='password' id="password" name='j_password'>
							<a href="javascript:rememberPassword();" title='<fmt:message key="action.user.recover.password"/>'>
								<fmt:message key="action.user.recover.password"/>
							</a>
							<input name="submit" type="submit" value="<fmt:message key="action.user.login"/>" />
							<a href="<c:url value='/participant'/>" title='<fmt:message key="action.user.register"/>' class="register">
								<fmt:message key="action.user.register"/>
							</a>
						</form>
							
							</c:otherwise>
						</c:choose>
					
						<p><fmt:message key="find.message"/></p>
					
					<div class="tagcloud" style="width: 80%;">
						
						<ol>
							<li><a href="<c:url value='/company/directory'/>" title="<fmt:message key="action.company.directory"/>" >
								<fmt:message key="action.company.directory"/>
							</a></li>
							<li><a href='#' class='basic'><fmt:message key="action.filter.activity.sector"/></a></li>
							<!--  -->
							<li><a href='#' class='basic2'><fmt:message key="action.filter.innovation.type"/></a></li>
							
						</ol>
					
					</div>
					</div>
					
					
				</div>
				
				<div class="conten_right">
				
				<p class="entra_naranja"><fmt:message key="home.entradilla.1"/></p>
				<strong><fmt:message key="home.entradilla.2"/></strong>
				<p><br/></p>
				
					<!-- Tabla que contiene las etapas que componen todo la competición -->
					<table class="timetable">
						<thead>
    						<tr>
      							<th><fmt:message key="home.goodpractice.timetable.header.2"/></th>
      							<th><fmt:message key="home.goodpractice.timetable.header.3"/></th>
    						</tr>
  						</thead>
  						<tbody>
    						<tr>
      							<td><fmt:message key="home.goodpractice.stage.1.title"/></td>
      							<td>
      								<div id="advice">
      									<fmt:message key="home.goodpractice.stage.1.date"/>
      								</div>
      							</td>   							
    						</tr>
    						<tr>							
      							<td><fmt:message key="home.goodpractice.stage.3.title"/></td>
      							<td><fmt:message key="home.goodpractice.stage.3.date"/></td>					
    						</tr>
    						<tr>
      							<td><fmt:message key="home.goodpractice.stage.4.title"/></td>
      							<td><fmt:message key="home.goodpractice.stage.4.date"/></td>
    						</tr>
  						</tbody>
					</table>
				
				<br/><br/>
				
				
				<div class="glossymenu">
						<!-- Descripción de los pasos en los que consiste el procedimiento. -->
						<a class="menuitem submenuheader" href="#" >
							<fmt:message key="home.goodpractice.process.title"/>
						</a>
						<div class="submenu">
							<p><fmt:message key="home.goodpractice.process.paragraph.1"/></p>
							<br/>
							<p><fmt:message key="home.goodpractice.process.paragraph.2"/></p>
							<br/>
							<p>	<fmt:message key="home.goodpractice.process.paragraph.3"/>	
					 			<fmt:message key="home.goodpractice.process.paragraph.4"/>
							</p>
							<br/>
							<p>
								<fmt:message key="home.goodpractice.process.paragraph.5"/>								
								<fmt:message key="home.goodpractice.process.paragraph.6"/>					
								<fmt:message key="home.goodpractice.process.paragraph.7"/>
							</p>
						</div>
						<!-- Descripción de las normas de la competición. -->
						<a class="menuitem submenuheader" href="#">
							<fmt:message key="home.goodpractice.competion.rules.title"/>
						</a>
						<div class="submenu">
								<ol>
									<li><fmt:message key="home.goodpractice.competion.rule.1"/></li>
									
									<li><fmt:message key="home.goodpractice.competion.rule.2"/></li>
									<li><fmt:message key="home.goodpractice.competion.rule.3"/></li>
									<!--  
									<li><fmt:message key="home.goodpractice.competion.rule.4"/></li>
									<li><fmt:message key="home.goodpractice.competion.rule.5"/></li>
									<li><fmt:message key="home.goodpractice.competion.rule.6"/></li>
									<li><fmt:message key="home.goodpractice.competion.rule.7"/></li>							
									<li><fmt:message key="home.goodpractice.competion.rule.8"/></li>
									-->
								</ol>
						</div>
				</div>
				</div>
			</div>
			</div>
			<div class="menu_videos_bottom">
				<div class="video_dispon">
					<p>
						<fmt:message key="videos.available"/>: <span>${fn:length(companies)}</span>
					</p>
				</div>
				<p class="txt_juntovideo">
						<fmt:message key="home.lastvideos.uploaded"/>
				</p>
				
        
				<div class="scroll_videos">
				<button class="prev"><<</button><button class="next">>></button>
    				<ul>
       					  <c:forEach items="${companies}" var="company">
  	 						<c:if test="${!empty company.videos}">
								<c:set var="video" value="${company.videos[0]}"/>	
	 							<li>
									<a href="<c:url value='/company/detail/${company.id}'/>" title="${company.companyInfo.name}" class="img">
									<img src="${video.thumbURL}" alt="${company.companyInfo.name}"/>
									<span><img src="<c:url value='/static/img/interfaz/play_naranja.png'/>" alt="<fmt:message key='action.video.play'/>" /></span>
									</a>
								<a href="<c:url value='/company/detail/${company.id}'/>" title="${company.companyInfo.name}">
									${company.companyInfo.name}
								</a>
								</li>
	 						
	 						</c:if>
						</c:forEach>
    				</ul>
				</div>
				
				
				
				<%@ include file="/WEB-INF/views/common/footer.jsp" %>
			</div>	
	</div>
	</body>
	
</html>
